<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>表格查询</title>
		<link rel="stylesheet" href="../js/layui/css/layui.css">
		<link rel="stylesheet" href="../css/x-admin.css" media="all">
	</head>
	<body>
		 <div class="x-nav">
            <span class="layui-breadcrumb">
              <a href="javascript:;">首页</a>
              <a  href="javascript:;">会员管理</a>
              <a  href="javascript:;"><cite>会员列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新">
            	<i class="layui-icon" style="line-height:30px">ဂ</i>
            </a>
        </div>
		
		  <div class="x-body">
		  	 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>查询条件</legend>
			 </fieldset>
			 <form class="layui-form x-center" action="" >
	                <div class="layui-form-pane" style="margin-top: 15px;">
	                  <div class="layui-form-item">
	                    <label class="layui-form-label">日期</label>
	                    <div class="layui-input-inline">
					      <input type="text" id="date" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
					    </div>
	                    <label class="layui-form-label">用户名</label>
	                    <div class="layui-input-inline">
	                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
	                    </div>
	                  
					    <label class="layui-form-label">单行选择框</label>
					    <div class="layui-input-inline">
					      <select name="interest" lay-filter="aihao">
					        <option value=""></option>
					        <option value="0">写作</option>
					        <option value="1" selected="">阅读</option>
					        <option value="2">游戏</option>
					        <option value="3">音乐</option>
					        <option value="4">旅行</option>
					      </select>
					    </div>
					  </div>
					  <div class="layui-form-item">
					  	 <label class="layui-form-label">日期</label>
	                    <div class="layui-input-inline">
					      <input type="text" id="date" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
					    </div>
	                    <label class="layui-form-label">用户名</label>
	                    <div class="layui-input-inline">
	                      <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
	                    </div>
					    <label class="layui-form-label">选择框</label>
					    <div class="layui-input-inline">
					      <select name="interest" lay-filter="aihao">
					        <option value=""></option>
					        <option value="0">写作</option>
					        <option value="1" selected="">阅读</option>
					        <option value="2">游戏</option>
					        <option value="3">音乐</option>
					        <option value="4">旅行</option>
					      </select>
					    </div>
					    <div class="layui-input-inline" style="width:80px">
	                        <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
	                    </div>
					  </div>	
	                </div> 
	            </form>
	         <table id="demo" lay-filter="demo"></table> 
		  </div>  
		  
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
		</script>
	</body>
	<script type="text/javascript" src="../js/layui/layui.js"></script>
	<script type="text/javascript" src="../js/utils.js"></script>
	<script>
		 layui.use(['element','form', 'laydate','table','layer'], function(){
		 	var element = layui.element, //导航的hover效果、二级菜单等功能，需要依赖element模块
		 	    form = layui.form,
		 	    table = layui.table,
		 	    laydate = layui.laydate;
			  
			  //日期
			laydate.render({
			    elem: '#date'
			});
			
		//展示已知数据
		  table.render({
		    elem: '#demo'
		    ,data: [{
		      "id": "10001"
		      ,"username": "杜甫"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "116"
		      ,"ip": "192.168.0.8"
		      ,"logins": "108"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10002"
		      ,"username": "李白"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "12"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		      ,"LAY_CHECKED": true
		    }, {
		      "id": "10003"
		      ,"username": "王勃"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "65"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10004"
		      ,"username": "贤心"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "666"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10005"
		      ,"username": "贤心"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "86"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10006"
		      ,"username": "贤心"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "12"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10007"
		      ,"username": "贤心"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "16"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }, {
		      "id": "10008"
		      ,"username": "贤心"
		      ,"email": "xianxin@layui.com"
		      ,"sex": "男"
		      ,"city": "浙江杭州"
		      ,"sign": "人生恰似一场修行"
		      ,"experience": "106"
		      ,"ip": "192.168.0.8"
		      ,"logins": "106"
		      ,"joinTime": "2016-10-14"
		    }]
		    ,height: 272
		    ,cols: [[ //标题栏
		      {checkbox: true, LAY_CHECKED: true} //默认全选
		      ,{field: 'id', title: 'ID', width: 80, sort: true}
		      ,{field: 'username', title: '用户名', width: 120}
		      ,{field: 'email', title: '邮箱', width: 150}
		      ,{field: 'sign', title: '签名', width: 150}
		      ,{field: 'sex', title: '性别', width: 80}
		      ,{field: 'city', title: '城市', width: 100}
		      ,{field: 'experience', title: '积分', width: 80, sort: true}
		      ,{fixed: 'right', width:160, align:'center', title:'操作',toolbar: '#barDemo'}
		    ]] 
		    ,skin: 'row' //表格风格
		    ,even: true
		    ,page: true //是否显示分页
		    ,limits: [5, 7, 10]
		    ,limit: 5 //每页默认显示的数量
		  });
		
		  table.on('tool(demo)', function(obj){
		    var data = obj.data;
		    if(obj.event === 'detail'){
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(obj.event === 'del'){
		      layer.confirm('真的删除行么', function(index){
		        obj.del();
		        layer.close(index);
		      });
		    } else if(obj.event === 'edit'){
		      x_admin_show('编辑','list_edit.html','','300');
		    }
		  });
		 })
	</script>
</html>
